import React, { Component, useState, useEffect, useRef, useCallback } from 'react'
import { debounce, throttle } from 'lodash'
import { Input, Button } from 'antd'

/**
 * debounce: 防抖 防止http请求过多 必须配合受控逻辑
 * throttle: 截流
 */

// 模拟请求接口
function http(value) {
  return new Promise((resolve, reject) => {
    resolve({ code: 0, msg: 'success', value })
  })
}
// hooks 函数中使用debounce
const Index = () => {
  // 状态
  const [value, setValue] = useState('')
  // 监听状态
  useEffect(() => {
    onChange(value)
  }, [value])
  // useCallback 可以优化不使用的函数具柄
  const onChange = useCallback(
    debounce((value) => {
      console.log(value, 'valuehttp')
    }, 500),
    []
  )
  return (
    <>
      <Input style={{ width: 300 }} value={value} onChange={(e) => setValue(e.target.value)} />
    </>
  )
}
export default Index

// 函数组件 使用按钮防抖 inputRef防抖
// const Index = () => {
//   // 函数组件内部的受控组件
//   const [value, setValue] = useState('')
//   const inputRef = useRef()

//   const onChange = debounce(() => {
//     http(value).then((res) => {
//       console.log('res:', res)
//     })
//   }, 2000)

//   return (
//     <>
//       <Button
//         onClick={() => {
//           onChange()
//         }}
//       >
//         按钮
//       </Button>
//       <Input ref={inputRef} />
//     </>
//   )
// }

// export default Index

// export default class index extends Component {
//   state = {
//     value: '',
//   }

//   onChange = debounce(() => {
//     console.log('http请求', this.state.value)
//   }, 2000)

//   render() {
//     return (
//       <div>
//         <Input
//           style={{ width: 300 }}
//           value={this.state.value}
//           onChange={(e) => {
//             this.setState({
//               value: e.target.value,
//             })
//             this.onChange()
//           }}
//         ></Input>
//       </div>
//     )
//   }
// }
